<template>
  <div class="goodsReview">
    <div class="present">
      <van-checkbox v-model="checked" checked-color="#41C856"
        >只看当前商品</van-checkbox
      >
    </div>
    <ul class="filter">
      <li
        v-for="(item, index) in viewPoints.filter((v) => v.number !== 0)"
        :key="item.name +(''+ index)"
        :class="{ active: curIndex == index }"
        @click="handleChangeView(item.param,index)"
      >
        {{ item.name }}({{ item.number }})
      </li>
    </ul>
    <!-- 评价列表 -->
    <ul class="evaluate">
        <!-- 列表加载 -->
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <li v-for="(item, index) in pointList" :key="item.uid + index">
          <div class="user-title">
            <img class="user-img" :src="item.avatar" alt="" />
            <div class="user-info">
              <p class="tel">
                <span>{{ item.nickname }}</span>
                <img :src="item.user_level_icon" alt="" />
              </p>
              <p class="time">
                {{ item.publish_time }} | {{ item.formats[0] }}
              </p>
            </div>
            <div class="star">
              <img
                src=""
                alt=""
              />
            </div>
          </div>
          <p class="evalue-text">{{ item.content }}</p>
          <div class="photos">
            <img
              v-for="value in item.photos"
              :key="value"
              :src="value"
              alt=""
              :width="100 / item.photos.length + '%'"
            />
          </div>
        </li>
      </van-list>
    </ul>
  </div>
</template>
 
<script>
import Vue from "vue";
import { Checkbox, CheckboxGroup, Rate, List } from "vant";
Vue.use(Checkbox);
Vue.use(CheckboxGroup);
Vue.use(Rate);
Vue.use(List);
export default {
  data() {
    return {
      checked: false,
      // 筛选评价
      viewPoints: [],
      //评价列表
      pointList: [],
      //评价总页数
      totalPage: 0,
      //列表
      list: [],
      loading: false,
      finished: false,
      //当前页
      curPage:1,
      curIndex:0,
      //排序
      sort:0,
      only_this_one:0
    };
  },
  async mounted() {
    // await this._loadData(1);
  },
  watch:{
      sort:function(newSort,oldSort) {
          this.pointList =  []
      }
   
  },
  methods: {
    _loadData() {
     return this.$http
        .get({
          url: "/goods/review/main.html",
          params: {
            do: "list",
            page:this.curPage,
            sort:this.sort,
            gid: this.$route.params.gid,
            lookfold: 0,
            only_this_one: this.only_this_one,
            system: "wap",
            isWeb: 1,
            version: 517,
            distinct_id:
              "17685498279c38-070e7217d2903e-6d112d7c-1296000-1768549827abe7",
          },
        })
        .then((res) => {
          let { viewPoints, list, total_page } = res.data;
          if(viewPoints) {
              this.viewPoints =viewPoints;
          }
            console.log(total_page)
          if(total_page) {
              this.totalPage = total_page;
          }
          this.pointList = [
              ...this.pointList,
              ...list
          ];
        });
    },

    handleChangeView(params,index) {
    this.curIndex = index
     this.sort = params.sort;
     this.only_this_one = params.only_this_one
     console.log(this.sort)
     this._loadData()
    },
    async onLoad() {
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
        await this._loadData().then((res) => {
            if(this.loading) {
                this.curPage++
            }
            this.loading = false
            if(this.curPage>=this.totalPage) {
                this.finished=true
            } 
        })
       
    },
  },
};
</script>
 
<style scoped lang = "stylus">
/* 只看当前商品 */
.present {
  height: 0.37rem;
  padding: 0.1rem 0.1rem 0.05rem;
}

/* 筛选 */
.filter {
  display: flex;
  flex-wrap: wrap;
  padding: 0 0.1rem;

  li {
    height: 0.24rem;
    margin: 0.1rem 0.05rem 0 0;
    font-size: 0.12rem;
    color: #666;
    padding: 2px 10px;
    text-align: center;
    border-radius: 0.24rem;
    line-height: 0.2rem;
    border: 1px solid #e5e5e5;
  }

  li.active {
    border-color: #41C856;
    color: #41C856;
  }
}

/* 评价 */
.evaluate {
  padding: 0.1rem 0.15rem 0;

  li {
    padding: 0 0.1rem 0.15rem 0.1rem;
    margin-top: 0.15rem;
  }
}

.user-title {
  display: flex;

  &>img {
    display: block;
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 50%;
  }

  .user-info {
    flex: 1;
    font-size: 0.12rem;

    .tel, .time {
      height: 0.2rem;
    }

    .time {
      color: #999;
    }

    .tel {
      display: flex;
      color: #333;
      align-items: center;

      span {
        padding-right: 0.05rem;
      }

      img {
        display: block;
        height: 13px;
      }
    }
  }

  .star {
    width: 0.6rem;
    height: 0.25rem;

    img {
      display: block;
      width: 100%;
      height: 0.08rem;
    }
  }
}

.evalue-text {
  color: #333;
  margin-top: 0.05rem;
  font-size: 0.13rem;
}

.photos {
  display: flex;

  img {
    flex: 1;
    display: block;
    margin: 0 2px;
    border-radius: 0.05rem;
  }
}
</style>